<template>
  <view class="container">
    <swiper class="swiper-container" :autoplay="true" :interval="3000" :duration="500" :circular="true">
      <swiper-item v-for="(slide, index) in slides" :key="index">
        <image :src="slide" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>
    <view class="search-bar">
      <input type="text" placeholder="搜索所需要的产品" />
      <button class="search-button">🔍</button>
    </view>
    <view class="categories">
      <view class="category-item" v-for="(item, index) in categories" :key="index">
        <text>{{ item.title }}</text>
        <text>{{ item.subtitle }}</text>
        <image :src="item.image" mode="aspectFill" class="category-image"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        '/static/images/4.png', // 更新为实际的图片路径
        '/static/images/5.png', // 更新为实际的图片路径
        '/static/images/6.png', // 更新为实际的图片路径
      ],
      categories: [
        {  subtitle: '精选新鲜水果', image: '/static/images/4.png', },
        {  subtitle: '新鲜蔬菜直供', image: '/static/images/5.png', },
        {  subtitle: '调味和干货', image: '/static/images/6.png', },
        {  subtitle: '纯正鲜榨菜籽油', image: '/static/images/7.png', },
        {  subtitle: '新鲜肉蛋奶', image: '/static/images/4.png', },
        {  subtitle: '手工艺品', image: '/static/images/4.png', },
		{  subtitle: '纯正牛奶', image: '/static/images/4.png', },
        {  subtitle: '精选中药材', image: '/static/images/4.png', },
        {  subtitle: '农产品加工', image: '/static/images/4.png', }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
.swiper-container {
  width: 100%; /* 设置宽度为100% */
  height: 300rpx;
}
.swiper-image {
  width: 100%; /* 设置图片宽度为100% */
  height: 100%; /* 设置图片高度为100% */
  object-fit: cover; /* 确保图片覆盖整个容器 */
}
.search-bar {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
input {
  width: 80%;
  padding: 10rpx;
  border-radius: 10rpx;
  border: 1px solid #ccc;
}
.search-button {
  margin-left: 10rpx;
  padding: 10rpx 20rpx;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 10rpx;
}
.categories {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  flex-wrap: wrap; /* 添加换行 */
}
.category-item {
  width: 30%;
  margin-bottom: 20rpx; /* 添加底部外边距 */
  text-align: center;
}
.category-image {
  width: 100%;
  height: 150rpx;
  margin-top: 10rpx;
  border-radius: 100%; /* 设置为圆形 */
  soverflow: hidden; /* 裁剪多余的部分 */
}
</style>